feat(multi-select): upgrade multi select mechanic - #34
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR upgrades the multi-select drag mechanic for the puzzle game. The key change is replacing a single highlight field (one highlighted piece) with highlightPositions: number[] (an array supporting multi-piece hover preview). It also introduces a dragContext mechanism to work around the browser security restriction that prevents reading dataTransfer data during dragenter events, and moves the game control toolbar (RESTART/PAUSE/Preview/stats) from below the board to a sticky header above it.
Changes:
- Multi-tile drag preview: selected group's target slots are highlighted during hover, with validation against row-boundary wrapping
- Sticky control toolbar: buttons and stats moved above the board as a sticky bar
- Test updates: new E2E tests for group highlight preview (valid/invalid moves) and updated layout assertions to match the new UI
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
modules/game/composables/useEventGame.ts |
Adds dragContext, onDragStart, onDragEnd, clearHighlight, resolveDragContext; upgrades onDragEnter to compute multi-slot highlights |
modules/game/components/Piece.vue |
Adds drag-start/drag-end events, data-highlighted/data-selected attributes, reads dataTransfer in dragenter for test compatibility |
modules/game/views/GameView.vue |
Switches highlight to highlightPositions, moves toolbar to sticky top, wires new events |
modules/game/types/index.ts |
Replaces highlight: number | string with highlightPositions: number[] |
tests/e2e/multi-select.spec.ts |
Adds fireDragEnter/dragHover helpers and 3 new group-preview tests; updates selectors to use data-* attributes |
tests/e2e/advanced.spec.ts |
Updates layout test to match new Preview button and stopwatch format |
| evt.dataTransfer.effectAllowed = "move"; | ||
| evt.dataTransfer.setData("position", position); | ||
| // Przekaż listę zaznaczonych slotów, żeby drop wiedział o grupie | ||
| // Przekaz listę zaznaczonych slotów, żeby drop wiedział o grupie |
There was a problem hiding this comment.
Three Polish comment spelling errors were introduced in this diff (diacritical marks removed):
- Line 33: "Przekaz" should be "Przekaż" (missing ż)
- Line 36: "przeciagamy" should be "przeciągamy" (missing ą)
- Line 106: "Nakladka" should be "Nakładka" (missing ł)
| evt.dataTransfer.setData("selectedPositions", JSON.stringify(selectedPositions)); | ||
|
|
||
| // Customowy ghost image gdy przeciągamy grupę | ||
| // Customowy ghost image gdy przeciagamy grupę |
There was a problem hiding this comment.
Spelling error: "przeciagamy" is missing the Polish diacritic ą and should be "przeciągamy".
| // Customowy ghost image gdy przeciagamy grupę | |
| // Customowy ghost image gdy przeciągamy grupę |
| @click="onPieceClick($event, item.position)" | ||
| > | ||
| <!-- Nakładka zaznaczenia --> | ||
| <!-- Nakladka zaznaczenia --> |
There was a problem hiding this comment.
Spelling error: "Nakladka" is missing the Polish diacritic ł and should be "Nakładka".
| <!-- Nakladka zaznaczenia --> | |
| <!-- Nakładka zaznaczenia --> |
| alt="" | ||
| /> | ||
| <div | ||
| class="sticky top-2 z-30 mb-6" |
There was a problem hiding this comment.
The sticky toolbar has no background color set. When the page is scrolled, the puzzle board will be visible through the transparent toolbar area, making buttons and text difficult to read. Adding a background class (e.g., bg-white or a semi-transparent variant) to the sticky container would prevent content from bleeding through when the user scrolls down.
| class="sticky top-2 z-30 mb-6" | |
| class="sticky top-2 z-30 mb-6 bg-white/90 backdrop-blur-sm" |
No description provided.